<template>
  <view class="tab-container">
    <!-- Tab导航栏 -->
    <view class="tab-nav">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ 'tab-active': currentTab === index }"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.title }}</text>
        <view 
          class="tab-indicator"
          :class="{ 'indicator-active': currentTab === index }"
        ></view>
      </view>
    </view>
    
    <!-- Tab内容区域 -->
    <view class="tab-content" v-if="currentTab==0">
      <view class="form-container">
        <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text>业主姓名:</text>
          </view>
          <input class="form-input" type="text" placeholder="请输入业主姓名" v-model="formData.name" />
        </view>
        
       <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text>投注站星级</text>
          </view>
          <picker class="form-picker" @change="onStarChange" :value="formData.star" :range="starOptions">
            <view class="picker-placeholder" v-if="formData.star==='star1'">{{formData.star}}</view>
			<view class="picker-placeholder" v-else-if="formData.star==='star2'">{{"二星"}}</view>
			<view class="picker-placeholder" v-else-if="formData.star==='star3'">{{"三星"}}</view>
			<view class="picker-placeholder" v-else-if="formData.star==='star4'">{{"四星"}}</view>
			<view class="picker-placeholder" v-else-if="formData.star==='star5'">{{"五星"}}</view>
			<view class="picker-placeholder" v-else>请选择</view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text>站点编号</text>
          </view>
          <input class="form-input" type="text" placeholder="请输入站点编号" v-model="formData.station_no" />
        </view>
        
        <view class="form-item"  @tap="open">
          <view class="form-label">
            <text class="required">*</text>
            <text>请选择省份城市与地区:</text>
          </view>
          <!-- <view class="location-picker" @click="showLocationPicker">
            <text class="location-text" v-if="formData.ptext>
            // <view class="location-icon">🏠</view>rovince_name">	{{formData.province_name}} {{formData.city_name}} {{formData.district_name}}</text>
			 <text class="location-text" v-else>请选择</
          </view> -->
		  
		  <uv-form-item  @click="open">
		  
		  
		  	
		  		<view class="location-picker">
		  			<view class="location-text" v-if="formData.province_name">
		  				{{formData.province_name}} {{formData.city_name}} {{formData.district_name}}
		  			</view>
				
		  			<view class="location-text" v-else>
		  				请选择
		  			</view>
						<view class="location-icon">🏠</view>
		  		</view>
		
		  
		  	<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="change"
		  		@confirm="confirm">
		  	</uv-picker>
		  </uv-form-item>
        </view>

         <!-- 地址选择器 -->
          <!-- <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/> -->
	<!-- 	  <picker mode="multiSelector" range-key='name' @columnchange="change" :value="index" :range="addressList">
		  					
								<text class="location-text" v-if="formData.province_name">	{{formData.province_name}} {{formData.city_name}} {{formData.district_name}}</text>
								 <text class="location-text" v-else>请选择</text>
		  					</picker> -->
		<view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text>站点详细地址:</text>
          </view>
          <input class="form-input" type="text" placeholder="请输入站点详细地址" v-model="formData.address" />
        </view>
		<view class="upload-container">
		   <view class="upload-title">上传考评表</view>
		   
		     
		<view class="upload-grid">
		     
		     <view     class="upload-item" v-if="imgurlone">
		       <image 
		         :src="imgurlone" 
		      class="upload-preview"
		       ></image>
		   
		      <view class="delete-btn" @click="deleteMedias()">×</view>
		     </view>
		     
		  
		     <view 
		     
		       class="upload-item upload-add"
		       @click="chooseMediaone"
			   v-else
		     >
		       <view class="add-icon">+</view>
		       <text class="add-text">添加图片</text>
		     </view>
		   </view>
		      	 </view>
       <view class="upload-container" >
          <view class="upload-title">上传投注站图片</view>
          
     
<view class="upload-itemgrid">
			 <view class="upload-grid" 	v-for="(e,index) in imgurl.length"
					:key="index">
			    
				  <view 
			        class="upload-item"
				      v-if="imgurl[index].url"
			      >
			        <image 
			          :src="imgurl[index].url" 
			          class="upload-preview"
					  
			        ></image>
			    
			        <view class="delete-btn" @click="deleteMedia(index)">×</view>
			      </view>
			      <view 
			    
			        class="upload-item upload-add"
			        @click="chooseMedia(index)"
					v-else
			      >
			        <view class="add-icon">+</view>
			        <text class="add-text" v-if="imgurl[index].flg">正在上传</text>
					<text class="add-text" v-else>添加图片</text>
			      </view>
			    </view>
				</view>
      	 </view>
   
	 <!-- 上传视频 -->
	  <view class="upload-container"  >
	          <view class="upload-title">上传视频</view>
	  	  <view class="video-thumbnail" v-if="uploadResult">
	  	    <!-- 视频组件 -->
	  	    <video
	  	      :src="uploadResult.data.fullurl"
	  	      :controls="true"
	  	      :autoplay="false"
	  	      :loop="false"
	  	      :muted="false"
	  		  :show-center-play-btn="false"
	  	      class="video-player"
	  	      @error="handleVideoError"
	  	    ></video>
	  	  </view>
	      <view  class="upload-item upload-add" style="width: 150rpx; height: 170rpx;" @tap="selectVideo">
	        <view class="add-icon">+</view>
	        <text class="add-text">添加视频</text>
	      </view>
	    </view>


	  
	  
      </view>
	  	  <button class="submit-button" @click="submitForm">提交</button>
    </view>
	<view class="tab-content" v-else>
            <upgradeVue></upgradeVue>
	</view>

  </view>
  
</template>

<script>
	import { Setinfo,Setupload,getarea,getstr } from '../../api';
	const baseUrl = 'https://type-in.10906.cn/api/';
	import upgradeVue from './compontens/upgrade.vue';
	  import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
export default {
  name: 'TabSwitch',
  components:{upgradeVue},
  props: {
    // Tab数据，格式: [{title: '标题1', content: '内容1'}, ...]
    tabs: {
      type: Array,
      default: () => [
        { title: '星级评定'},
        { title: '升级验收'},

      ],
      required: false
    },
	conindex:'',
    // 默认选中的Tab索引
    defaultActive: {
      type: Number,
      default: 0,
      required: false
    },
    // 激活状态的颜色
    activeColor: {
      type: String,
      default: '#3498db',
      required: false
    },
    // 非激活状态的颜色
    inactiveColor: {
      type: String,
      default: '#666666',
      required: false
    }
  },
  data() {
    return {
		// array:[[123],[321],[12311]],
      currentTab: this.defaultActive,
      // 用于动画过渡
      transition: false,
      // 表单数据
      formData: {
        name: '',
        station_no: '',
		city_name:'',
        province_name: '',
		district_name:'',
		images:'',
        address: '',
		star:'',
		video:'',
	
		evaluation:'',
		type:'assess'
      },
      // 星级选项
      starOptions: [],
      // 媒体文件列表
      mediaFiles: [],
	  imgurl:[
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
		  {url:'',urls:'',flg:false},
	  ],
	  imgurlone:'',
	    visible: false,
		imgflg:false,
	                  maskCloseAble: true,
	                 provinces: [], //省
	                 citys: [], //市
	                 areas: [], //区
					  column: 3,
					  str:'',
	                 pickerValue: [0, 0, 0], // 选择器默认索引
	                 defaultValue: [], // 默认地区ID（如有需要）
					 loading: true, // 加载状态
					 videoSelected: false,
					 videoPath: '',
					ceshiData: [],
					uploadResult:"",
					 
    };
  },
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
  watch: {
    defaultActive(newVal) {
      this.currentTab = newVal;
    }
  },
  onLoad() {
  	this.getstrs()
	this.getareas()
  },
  methods: {
    // 切换Tab
	// 选择视频
	selectVideo() {
		console.log('11111');
	  const that = this;
	  uni.chooseVideo({
	    count: 1,
	    mediaType: ['video'],
	    sourceType: ['album', 'camera'],
	    maxDuration: 60,
	    camera: 'back',
		compressed: true,
		 maxSize: 50 * 1024 * 1024, // 限制最大50MB
	    success(res) {
			
			// console.log('res',res)
			// 	console.log('res',res.path)
					// console.log('res',res.tempFile.path )
	      that.videoPath =res.tempFilePath
		  // console.log('1111111',that.getBlobId(res.tempFilePath));
	      that.videoSelected = true;
		    that.confirmUpload()
	      // 这里可以添加视频预览逻辑
	    },
	    fail(err) {
	      console.log('选择视频失败', err);
	    }
	  });
	},
	// 确认上传
	async   confirmUpload() {
		       
	
			   
		console.log('this.videoPath.tempFilePath',this.videoPath)
	      if (!this.videoPath) return;
	        
	        uni.uploadFile({
	          url: baseUrl + `common/upload`,
	          filePath: this.videoPath, // 要上传的文件临时路径
	          name: 'file', // 后端接收文件的参数名（与后端约定）
	          method: 'POST',
			   header:{
				   token:localStorage.getItem('token')
			   },
	          // 额外的表单数据（可选）
	          // formData: {
	          //   'user_id': '123',
	          //   'file_type': 'image'
	          // },
	          
	          // 上传进度回调
	          onProgressUpdate: (res) => {
	            this.progress = res.progress; // 更新进度
	            console.log('上传进度：' + res.progress + '%');
	          },
	          // 上传成功
	          success: (uploadRes) => {
	            // 后端返回的结果（通常是JSON字符串）
				 console.log('uploadres',uploadRes.data);
	            const result = JSON.parse(uploadRes.data);
				  this.uploadResult =result
	              this.formData.video=this.uploadResult.data.url;
	            console.log('uploadresult111', this.uploadResult.data.fullurl);
	            if (result.code === 1) {
	              uni.showToast({
	                title: '上传成功',
	                icon: 'success',
					 duration: 30000000  // 时长设置，单位ms
	              });
	            } else {
	              uni.showToast({
	                title: '上传失败: ' + result.msg,
	                icon: 'none',
					duration: 30000000  // 时长设置，单位ms
	              });
	            }
	          },
	          // 上传失败
	          fail: (err) => {
	            console.error('上传失败：', err);
	            uni.showToast({
	              title:err,
	              icon: 'none',
				  	duration: 30000000000  // 时长设置，单位ms
	            });
	            this.progress = 0;
	          }
	        });
	   },
	async getstrs(){
		let res=await getstr();
		if(res.code==1){
			this.starOptions=res.data;
			 console.log('res星级列表',res)
		}
	
	},
	async getareas(){
		let res=await getarea();
		if(res.code==1){
		if (res.code == 1) {
			let data = res.data
				this.provinces = data.sort((left, right) => (Number(left.id) > Number(right.id) ? 1 : -1));
				this.handlePickValueDefault()
				setTimeout(() => {
					this.loading = false
				}, 200)
		}
		}
	
	},
	handlePickValueDefault() {
		// 避免未定义报错，先判断数据是否存在
		if (!this.provinces.length) return;
		// 设置省
		this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]) || 0;
		// 设置市
		this.citys = this.provinces[this.pickerValue[0]]?.children || [];
		this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]) || 0;
		// 设置区
		this.areas = this.citys[this.pickerValue[1]]?.children || [];
		this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]) || 0;
		// 重置选择器位置
		// this.$refs.picker?.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
	},
	change(e) {
		// if (this.loading) return;
		console.log(e)
		// let columnIndex = e.detail.column
		// let index = e.detail.value
		const {
			columnIndex,
			index,
			indexs
		} = e
		// 改变了省
		if (columnIndex === 0) {
			this.citys = this.provinces[index]?.children || []
			this.areas = this.citys[0]?.children || []
			// this.$refs.picker.setIndexs([index, 0, 0], true)
		} else if (columnIndex === 1) {
			this.areas = this.citys[index]?.children || []
			// this.$refs.picker.setIndexs(indexs, true)
		}
	},
	   open () {
	                this.visible = true
	            },
	            confirm (val) {
	                console.log(val)
					
	                this.str = JSON.stringify(val.name)
					this.formData.province_name=val.value[0].name;
					this.formData.city_name=val.value[1].name;
					this.formData.district_name=val.value[2].name;
					console.log('str',this.formData.province_name,this.formData.city_name,this.formData.district_name);
	                this.visible = false
	            },
	            cancel () {
	                this.visible = false
	            },
				getData() {
					Request({
						url: `bullbat/area/index`,
						method: 'POST',
						auth: true
					}).then(res => {
						if (res.code == 1) {
							let data = res.data
								this.provinces = data.sort((left, right) => (Number(left.id) > Number(right.id) ? 1 : -1));
								this.handlePickValueDefault()
								setTimeout(() => {
									this.loading = false
								}, 200)
						}
					})
				},
				handlePickValueDefault() {
					// 避免未定义报错，先判断数据是否存在
					if (!this.provinces.length) return;
					// 设置省
					this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]) || 0;
					// 设置市
					this.citys = this.provinces[this.pickerValue[0]]?.children || [];
					this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]) || 0;
					// 设置区
					this.areas = this.citys[this.pickerValue[1]]?.children || [];
					this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]) || 0;
					// 重置选择器位置
					this.$refs.picker?.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
				},
				
				change(e) {
					if (this.loading) return;
					const {
						columnIndex,
						index,
						indexs
					} = e
					// 改变了省
					if (columnIndex === 0) {
						this.citys = this.provinces[index]?.children || []
						this.areas = this.citys[0]?.children || []
						this.$refs.picker.setIndexs([index, 0, 0], true)
					} else if (columnIndex === 1) {
						this.areas = this.citys[index]?.children || []
						this.$refs.picker.setIndexs(indexs, true)
					}
				},
				open() {
					this.$refs.picker.open();
					this.handlePickValueDefault()
				},
    switchTab(index) {
      if (this.currentTab === index) return;
      
      this.transition = true;
      this.currentTab = index;
      
      // 触发自定义事件
      this.$emit('change', index);
      
      // 动画结束后关闭过渡状态
      setTimeout(() => {
        this.transition = false;
      }, 300);
    },
    // 星级选择变化
    onStarChange(e) {
		console.log('e',e.detail.value);
		console.log('e',this.starOptions[e.detail.value])
		const values = Object.keys(this.starOptions); 
      this.formData.star =values[e.detail.value];
    },
    // 显示位置选择器
    // showLocationPicker() {
    //   // 这里可以调用uni-app的位置选择API或自定义位置选择组件
    //   // 为了演示，我们直接设置一个示例位置
    //   this.formData.location = '北京市 北京市 海淀区';
    // },
    // 提交表单
   async submitForm() {
	     console.log('表单数据11：', this.formData);
      // 表单验证
      if (!this.formData.name) {
        uni.showToast({ title: '请输入业主姓名', icon: 'none' });
        return;
      }
      if (!this.formData.star) {
        uni.showToast({ title: '请选择投注站星级', icon: 'none' });
        return;
      }
      if (!this.formData.station_no) {
        uni.showToast({ title: '请输入站点编号', icon: 'none' });
        return;
      }
      if (!this.formData.province_name) {
        uni.showToast({ title: '请选择省份城市与地区', icon: 'none' });
        return;
      }
      if (!this.formData.address) {
        uni.showToast({ title: '请输入站点详细地址', icon: 'none' });
        return;
      }
      if (!this.formData.images) {
        uni.showToast({ title: '请添加图片', icon: 'none' });
        return;
      }
	  if (!this.formData.video){
	    uni.showToast({ title: '请添加视频', icon: 'none' });
	    return;
	  }

	  if (!this.formData.evaluation){
	    uni.showToast({ title: '请上传考评表', icon: 'none' });
	    return;
	  }
      // 提交成功提示
  
      
      // 这里可以添加表单提交的逻辑，如发送请求到服务器

	    //    this.imgurl.forEach((item,index)=>{
			  //  this.formData.images+=item.imgurl
		   // })
		         // console.log('表单数据11：', this.formData);
	      let res= await Setinfo(this.formData);
		  if(res.code==1){
			      uni.showToast({ title: '提交成功', icon: 'success' });
		this.imgurl.forEach((item,index)=>{
							  item.url=""
							  item.urls=""
							  item.flg=false
		})
		 this.formData.station_no="";
		 this.formData.name="";
		 this.formData.province_name="";
		 this.formData.city_name="";
		 this.formData.district_name="";
		 this.formData.address="";
		 this.formData.images="";
		 this.formData.evaluation="";
		 this.formData.video="";
		 this.formData.star="";
		 this.uploadResult="";
		 this.imgurlone="";
		  }else{
			      uni.showToast({ title: '提交失败', icon: 'success' });
		  }
    },
    // 选择媒体文件
      chooseMediaone() {
		  if(this.imgflg==true){
			   uni.showToast({ title: '正在上传请稍等', icon: 'success' });
			   return;
		  }
		  this.imgflg=true;
    // 限制只能选择1张图片
    uni.chooseImage({
      count: 1, // 只允许上传1张
      sizeType: ['compressed'], // 只选压缩图，节省流量
      sourceType: ['album', 'camera'], // 支持相册和相机
      success: (res) => {
        // 获取选中的图片临时路径
        const tempFilePath = res.tempFilePaths[0];
        this.uploading = true;
        this.progress = 0;
        
        // 上传图片到服务器
        this.uploadFileone(tempFilePath);
      },
      fail: (err) => {
        console.error('选择图片失败', err);
        uni.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
      },
      // 上传文件到服务器
      uploadFileone(tempFilePath) {
      				  
        uni.uploadFile({
          url:  baseUrl + `common/upload`, // 后端上传接口
          filePath: tempFilePath,
          name: 'file', // 后端接收文件的参数名，需与后端一致
      				  method: 'POST',
      				  header:{
      				  token:localStorage.getItem('token')
      				  },
          // formData: {
          //   // 额外的表单数据，根据后端需求添加
          //   'type': 'image',
          //   'from': 'wechat-h5'
          // },
          // 监听上传进度
          // onProgressUpdate: (res) => {
          //   this.progress = res.progress;
          // },
          success: (uploadRes) => {
            // 解析后端返回结果
            try {
              const result = JSON.parse(uploadRes.data);
              if (result.code === 1 && result.data.fullurl) {
      						  console.log(result.data);
                // 上传成功，保存图片地址
    			  this.formData.evaluation=result.data.url,
    			  // this.imgurls.push(result.data.url)
				  this.imgurlone=result.data.fullurl
				  console.log('单独图片',this.imgurlone);
    			  // if(this.imgurl.length==8){
    				 //   this.formData.images=this.imgurl.join();
    				 //   console.log('图片路径',this.formData.images)
    			  // }
    			 
                // this.imageUrl = result.data.fullurl;
				this.imgflg=false;
                uni.showToast({
                  title: '上传成功'
                });
              } else {
				this.imgflg=false;
                throw new Error(result.msg || '上传失败');
              }
            } catch (e) {
				this.imgflg=false;
              console.error('上传失败', e);
              uni.showToast({
                title: e.message || '上传失败',
                icon: 'none'
              });
            }
          },
          fail: (err) => {
			  this.imgflg=false;
            console.error('上传接口调用失败', err);
            uni.showToast({
              title: '网络错误，上传失败',
              icon: 'none'
            });
          },
          complete: () => {
            this.uploading = false;
          }
        });
      },
    // 选择媒体文件
    chooseMedia(e) {
		
		if(this.imgflg==true){
		uni.showToast({ title: '正在上传请稍等', icon: 'success' });
		return;
		}
		this.imgflg=true;
  // 限制只能选择1张图片
  uni.chooseImage({
    count: 1, // 只允许上传1张
    sizeType: ['compressed'], // 只选压缩图，节省流量
    sourceType: ['album', 'camera'], // 支持相册和相机
    success: (res) => {
      // 获取选中的图片临时路径
      const tempFilePath = res.tempFilePaths[0];
      this.uploading = true;
      this.progress = 0;
      
      // 上传图片到服务器
      this.uploadFile(tempFilePath,e);
	  this.imgurl[e].flg=true;
    },
    fail: (err) => {
		
      console.error('选择图片失败', err);
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
    },
    // 上传文件到服务器
    uploadFile(tempFilePath,e) {
    				  
      uni.uploadFile({
        url:  baseUrl + `common/upload`, // 后端上传接口
        filePath: tempFilePath,
        name: 'file', // 后端接收文件的参数名，需与后端一致
    				  method: 'POST',
    				  header:{
    				  token:localStorage.getItem('token')
    				  },
        // formData: {
        //   // 额外的表单数据，根据后端需求添加
        //   'type': 'image',
        //   'from': 'wechat-h5'
        // },
        // 监听上传进度
        // onProgressUpdate: (res) => {
        //   this.progress = res.progress;
        // },
        success: (uploadRes) => {
          // 解析后端返回结果
          try {
            const result = JSON.parse(uploadRes.data);
            if (result.code === 1 && result.data.fullurl) {
    						  console.log(result.data);
              // 上传成功，保存图片地址
			  // console.log('e下标',e);
			  // this.imgurl.push({e,url:result.data.fullurl})
			  // console.log('上传图片',this.imgurl);
			  // this.mediaFiles.push({url:result.data.fullurl}),
			  // this.imgurl.push(result.data.url)
			  this.imgurl.forEach((item,index)=>{
				  if(e==index){
					  item.url=result.data.fullurl
				      item.urls=result.data.url
				  }
			  })
			  // 筛选年龄 >= 18 的用户
			    let dataurl='';
			  dataurl =  this.imgurl.filter(user => {
			    return user.urls !="";
			  });
			
			// this.imgurl.forEach((item,index)=>{
			// 				  if(item.urls!=""){
			// 					 dataurl+=item.urls; 
			// 					  // item.url=result.data.fullurl
			// 				   //    item.urls=result.data.url
			// 				  }
			// })
			this.formData.images=dataurl.map((item,index)=>{
				  if(!item.urls){
					  
				  }else{
					  	   return item.urls;
				  }
			
			}).join(',');
			  console.log('dataurl', this.formData.images)
			  // if(this.imgurl.length==8){
				 //   this.formData.images=this.imgurl.join();
				 //   console.log('图片路径',this.formData.images)
			  // }
			 
              // this.imageUrl = result.data.fullurl;
			
			  this.imgflg=false;
              uni.showToast({
                title: '上传成功'
              });
			  this.imgurl[e].flg=false;
            } else {
              throw new Error(result.msg || '上传失败');
			    this.imgurl[e].flg=false;
				this.imgflg=false;
            }
          } catch (e) {
			  this.imgurl[e].flg=false;
			  this.imgflg=false;
            console.error('上传失败', e);
            uni.showToast({
              title: e.message || '上传失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
			this.imgflg=false;
          console.error('上传接口调用失败', err);
          uni.showToast({
            title: '网络错误，上传失败',
            icon: 'none'
          });
        },
        complete: () => {
          this.uploading = false;
        }
      });
    },
    // 删除媒体文件
    deleteMedia(e) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个媒体文件吗？',
        success: (res) => {
		this.imgurl.forEach((item,index)=>{
						  if(e==index){
							  item.url=""
							  item.urls=""
						  }
		})
   //        if (res.confirm) {
   //          this.mediaFiles.splice(e, 1);
			// this.imgurl.splice(e,1);
   //        }
        }
      });
	  
    },
	deleteMedias(){
		console.log('121212')
		  this.imgurlone='';
		// uni.showModal({
		//   title: '确认删除',
		//   content: '确定要删除这个媒体文件吗？',
		//   success: (res) => {
		//     if (res.confirm) {
		//        this.formData.imgurlone='';
		//     }
		//   }
		// });
	}
  }
};
</script>

<style scoped>
.tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab导航样式 */
.tab-nav {
  display: flex;
  flex-direction: row;
  height: 88rpx;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tab-text {
  font-size: 30rpx;
  transition: color 0.3s ease;
}

.tab-item:not(.tab-active) .tab-text {
  color: v-bind(inactiveColor);
}

.tab-active .tab-text {
  color: v-bind(activeColor);
  font-weight: 500;
}

/* 指示器样式 */
.tab-indicator {
  position: absolute;
  bottom: 0;
  width: 40rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background-color: v-bind(activeColor);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.indicator-active {
  transform: scaleX(1);
}

/* 内容区域样式 */
.tab-content {
/*  flex: 1; */
  overflow: hidden;
  position: relative;
  overflow-y: scroll;
  width: 100%;
  height: 3000rpx;
  background-color: #fff;
}

.tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 20rpx;
  box-sizing: border-box;
}

.panel-active {
  z-index: 1;
}

.default-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
  font-size: 28rpx;
}

/* 表单样式 */
.form-container {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.required {
  color: #f00;
  margin-right: 5rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  position: relative;
}

.picker-placeholder {
  color: #999;
}

.location-picker {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location-text {
  color: #333;
}

.location-icon {
  font-size: 36rpx;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-top: 60rpx;
}

/* 上传功能样式 */
.upload-container {
  padding: 30rpx;
}

.upload-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #000;
}
.upload-itemgrid{
	width: 710rpx;
	display: flex;
	flex-wrap: wrap; 
	/* gap: 20rpx; */
}
.upload-grid {
	width: 150rpx;
	height: 170rpx;
	padding: 0 5rpx;
/* 	width: 100%; */

/*  width: 500rpx; */
}

.upload-item {
	width: 100%;
	height: 100%;
 /* width: calc(25% - 15rpx);
  aspect-ratio: 1; */
  border: 1px solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  background-color: #f9f9f9;
}

.upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40rpx;
  color: #fff;
  text-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
}

.delete-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(255, 0, 0, 0.8);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  line-height: 1;
  border-bottom-left-radius: 8rpx;
}

.upload-add {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.add-icon {
  font-size: 60rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.add-text {
  font-size: 24rpx;
  color: #999;
}
</style>
